<template>
	<view class="user">
		<view class="top-bg">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="title">我的账户</view>
			<view class="body">
				<view class="acea-row">
					<view class="avatar">
						<image class="imgwh" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/default.png" mode=""></image>
					</view>
					<view class="acea-row row-column row-between" style="margin-left: 30rpx;">
						<view class="nickname">{{ userdata.real_name }}</view>
						<view class="account"> 
							<text style="color: #666;">账户：</text> 
							{{ userdata.card_id }}
						</view>
					</view>
				</view>
				<view class="tips acea-row">
					<view class="iconfont icon-dian"></view>
					<view style="">正常缴存</view>
				</view>
				<view class="danwei" style="margin-top: 30rpx;">
					<text style="color: #666;">缴存单位：</text>
					 {{ userdata.danwei_name }}
				</view>
				<view class="acea-row" style="margin-top: 50rpx;">
					<view class="">
						<view class="num">{{ userdata.geren_jishu ||'0' }} 元</view>
						<view style="font-size: 26rpx;color: #666;margin-top: 10rpx;">缴存基数</view>
					</view>
					<view style="margin-left: 150rpx;">
						<view class="num"> {{ userdata.geren_bili || 0 }} % / {{ userdata.danwei_bili || 0 }} % </view>
						<view style="font-size: 26rpx;color: #666;margin-top: 10rpx;">个人/单位缴存比例</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="muen">
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="">
						<image class="pictrue" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/anquanzhongxin.png" mode="aspectFit"></image>
					</view>
					<view style="margin-left: 20rpx;font-size: 26rpx;margin-top: -5rpx;">安全中心</view>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="">
						<image class="pictrue" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/gengduozhanghu.png" mode="aspectFit"></image>
					</view>
					<view style="margin-left: 20rpx;font-size: 26rpx;margin-top: -5rpx;">更多账户</view>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="">
						<image class="pictrue" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/shezhi.png" mode="aspectFit"></image>
					</view>
					<view style="margin-left: 20rpx;font-size: 26rpx;margin-top: -5rpx;">设置</view>
				</view>
				<view class="acea-row row-middle">
					<view style="font-size: 26rpx;color: #777;margin-right: 20rpx;">开启关怀版</view>
					<view class="iconfont icon-xiangyou"></view>
				</view>
			</view>
		</view>
		
		<view class="exit" @click="outLogin">退出登录</view>
		
		<tabbar :current="'2'"></tabbar>
		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import tabbar from '@/components/pageFooter/tabbar.vue';
	import{
		userData,
		getLogout
	} from '@/api/user.js'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				sysHeight: sysHeight,
				userdata: [],
				
			};
		},
		onShow() {
			uni.hideTabBar();
			this.getdata();
		},
		methods:{
			outLogin: function() {
				let that = this;
				// if (that.loginType == 'h5') {
					uni.showModal({
						title: that.$t(`提示`),
						content: that.$t(`确认退出登录`),
						success: function(res) {
							if (res.confirm) {
								getLogout()
									.then(res => {
										// uni.clearStorage()
										that.$store.commit("LOGOUT");
										uni.reLaunch({
											url: '/pages/index/index'
										})
									})
									.catch(err => {});
							} else if (res.cancel) {}
						}
					});
				// }
			},
			getdata(){
				userData().then(res=>{
					this.userdata = res.data.userData;
				})
			},
		}
	}
</script>

<style lang="scss">
	page{ background-color: #ffffff !important; }
	.user{
		
		.top-bg{
			width: 100%;
			height: 400rpx;
			background-color: #388EF4;
			padding: 0 30rpx;
			
			.title{
				color: #ffffff;
				line-height: 88rpx;
				font-size: 30rpx;
			}
			
			.body{
				width: 690rpx;
				border-radius: 15rpx;
				background-color: #ffffff;
				box-shadow: 0 0 10rpx #B2B4B2;
				margin-top: 30rpx;
				padding: 30rpx;
				position: relative;
				
				.avatar{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.nickname{
					font-size: 34rpx;
					font-weight: bold;
				}
				.account{
					font-size: 24rpx;
					color: #333333;
				}
				.tips{
					width: 200rpx;
					height: 55rpx;
					border-radius: 30rpx 0 0 30rpx;
					background-color: #284CC7;
					position: absolute;
					top: 30rpx;
					right: 0;
					color: #ffffff;
					font-size: 28rpx;
					line-height: 55rpx;
					
					.icon-dian{
						color: #6CBE60;
						font-size: 50rpx;
						margin-left: 10rpx;
					}
				}
				.danwei{
					font-size: 24rpx;
					color: #333333;
					margin-top: 10rpx;
				}
				.num{
					color: #000;
					font-size: 40rpx;
					font-weight: 500;
				}
				
			}
		
		
		
		}
		
		.muen{
			padding: 30rpx;
			margin-top: 200rpx;
			
			.item{
				border-bottom: 1rpx solid #eeeeee;
				padding: 30rpx 0;
				font-size: 26rpx;
				
				.pictrue{
					width: 45rpx;
					height: 45rpx;
					// background-color: #388EF4;
				}
				.icon-xiangyou{
					font-weight: bold;
					font-size: 26rpx;
				}
			}
		}
		
		.exit{
			text-align: center;
			font-size: 28rpx;
			color: #3D63D7;
			margin: 0 auto;
		}
		
	}
</style>
